<!-- 收货方扫描签收的数量确认列表 -->
<template>
  <div style="padding-bottom: 48px">
    <div class="m-det-warp mb30">
      <div class="m-det-tit">业务单号：{{data.BbMain.BBillNo}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">制单日期</span>
            <div class="flex1 value">{{data.BbMain.BillDate | GetDate}}</div>
          </li>
          <li class="displayflex">
            <span class="label">送货联系人</span>
            <div class="flex1 value">{{data.Vehicle.Driver1Name}} {{data.Vehicle.Driver1Tel}}</div>
          </li>
          <li class="displayflex">
            <span class="label">交货件数</span>
            <div class="flex1 value"><em class="red">{{data.BbMain.Pkgs}}</em>件</div>
          </li>
        </ul>
      </div>
    </div>

    <div class="mb30" v-for="item in todolist">
      <div class="m-list-warp">
        <div class="m-list-pictxt">
          <div class="displayflex">
            <div class="pic w200"><img :src="item.PictContent | filterImg"></div>
            <div class="m-list-txt flex1">
              <p>{{item.GoodsName}}</p>
              <p class="gray">{{item.GoodsSpec}}</p>
              <p class="gray">{{item.Producer}}</p>
              <p>共<em class="red">{{item.RecPKGS}}</em>{{item.Unit}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="m-checknum-wrap displayflex">
        <template v-if="item.signed == false">
          <span class="cn-lft">签收件数:</span>
          <div class="cn-ipt-wrap flex1 cf">
            <div class="cn-ipt-box f-l cf">
              <span class="icon minus f-l" @click="changeNum(item, -1)"></span>
              <span class="ipt f-l">
                <input class="red" type="text" v-model="item.RecPKGS" @input="iptBlur(item)">
              </span>
              <span class="icon add f-r" @click="changeNum(item, 1)"></span>
            </div>
            <span class="cn-unit f-l">{{item.Unit}}</span>
          </div>
          <div class="btn-checknum" @click="item.signed = true">签收</div>
        </template>

        <template v-else>
          <div class="flex1 cn-rece" style="display: block;">
            <div>签收件数:<em>{{item.RecPKGS}}{{item.Unit}}</em></div>
            <div class="icon-rece"><img src="~images/icon/tag_yqs.png"></div>
          </div>
        </template>
      </div>
    </div>

    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共<em class="red">{{data.BbMain.Pkgs}}</em>件商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l cancel" @click="cancel()">取消</li>
          <li class="btn-checknum f-l" @click="Confirm()">确认收货</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
export default{
  data() {
    return {
      data:{
        BbMain:{},
        PoMain:{},
        Vehicle:{},
      },
      todolist:{},
      TotalCounts:0,
    };
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      let query = {
        Guid: this.$route.query.Guid
      };
      this.Ajax.post('GetOrderDetail', query).then((res) => {
        if(res.IsSuccess){
          let ConPKGS = 0;
          res.Data.PoMain.State = parseInt(res.Data.PoMain.State);
          res.Data.BbDetailList.forEach((x) => {
            x.signed = false;
          })

          this.data = res.Data;
          this.todolist = res.Data.BbDetailList;
         console.log(res.Data.HandoverList);
          // this.todolist.forEach((x) => {
          //   res.Data.VehicleExies.forEach((y) => {
          //     if(x.GoodsGuid == y.GoodsGuid) {
          //       ConPKGS += y.ConPKGS;
          //       x.ConPKGS = y.ConPKGS;
          //       x.RecPKGS = y.ConPKGS;
          //       x.Pkgs = y.Pkgs;
          //     }
          //   })
          // })

           this.todolist.forEach((x) => {
                x.ConPKGS = x.Pcks;
                x.RecPKGS = x.Pcks;
                x.Pkgs = x.Pcks;
          })

          this.data.BbMain.ConPKGS = ConPKGS;
          this.amountNum();
        } else {
          this.Toast(res.ErrorMessage);
        }
      })
      .catch((e) => {
        this.Toast('出错了，请刷新重试')
      })
    },

    changeNum(item, way) {
      console.log(item.RecPKGS );
      if (way > 0) {
        if (item.RecPKGS < item.ConPKGS) {
          item.RecPKGS++;
        } else {
          this.Toast({ message: "签收件数不得大于总件数" });
        }
      } else if (way < 0 && item.RecPKGS > 0) {
        item.RecPKGS--;
      } else {
        this.Toast({
          message: "请输入大于0的数"
        });
      }
      this.amountNum();
    },

    //数量输入框
    iptBlur(item) {
      if (item.RecPKGS === "") {
        item.RecPKGS = 0;
      }
      if (item.RecPKGS > item.ConPKGS) {
        item.RecPKGS = item.ConPKGS;
        this.Toast({ message: "签收件数不得大于总件数" });
      }
      item.RecPKGS = parseInt(item.RecPKGS);
      this.amountNum();
    },

    amountNum() {
      this.TotalCounts = 0;
      this.todolist.forEach(x => {
        let qty = x.RecPKGS || 0;
        this.TotalCounts += qty;
      });
    },

    Confirm(){
      sessionStorage.setItem('GoodsList', JSON.stringify(this.todolist));
      sessionStorage.setItem('order', JSON.stringify(this.data));
      sessionStorage.setItem('TotalCounts', this.TotalCounts);
      this.$router.push({
        path: '/receiver/signconfirm'
      })
    },

    cancel(){
      this.$router.push({
        path:'/index'
      })
    }

  }
};
</script>